import React from "react";
import "@/layouts/Recommended.css";

import { Carousel } from "antd";
import swiper from "../../images/轮播图1.png";
import swiper1 from "../../images/轮播图2.png";
import swiper2 from "../../images/轮播图3.png";
import swiper3 from "../../images/轮播图4.png";

const contentStyle: React.CSSProperties = {
  margin: 0,
  height: "260px",
  color: "#fff",
  lineHeight: "260px",
  textAlign: "center",
};

function Swiper() {
  return (
    <div className="Swiper">
      <Carousel arrows autoplay={true} infinite={true} className="One">
        <div>
          <h3 style={contentStyle}>
            <img src={swiper} alt="" />
          </h3>
        </div>
        <div>
          <h3 style={contentStyle}>
            <img src={swiper1} alt="" />
          </h3>
        </div>
        <div>
          <h3 style={contentStyle}>
            <img src={swiper2} alt="" />
          </h3>
        </div>
        <div>
          <h3 style={contentStyle}>
            <img src={swiper3} alt="" />
          </h3>
        </div>
      </Carousel>
    </div>
  );
}

export default Swiper;
